<!-- 导航栏 -->

<template>
    <div class="header">
        <span @click="toggle">
            <mo-icon-expand  v-if="collapse"  />
            <mo-icon-fold  v-else  />   
        </span>  

    </div>

</template>

<script lang="ts" setup>


//! 父对象传入属性？
let props = defineProps<{
    collapse:boolean
}>();

const emits = defineEmits(['update:collapse']);
let toggle = () => {
    //! 需要修改父组件的数据
    console.log(props.collapse);
    emits('update:collapse', !props.collapse );
}


</script>

<style lang='less' scoped>
.header {
    height: 60px;
    padding: 0 20px;
    display: flex;
    align-items: center;
}

</style>